﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Below three meta labels *MUST* be on the top -->
    <title>Vacation System</title>

    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static 'online/css/bootstrap.min.css' %}" />
    
    <link rel="stylesheet" type="text/css" href="{% static 'online/css/common-style.css' %}" />
    
    <script src="{% static 'online/js/jquery-1.10.2.min.js' %}"></script>
    <script src="{% static 'online/laydate/laydate.js' %}"></script>
    {#<script src="{% static 'app/scripts/modernizr-2.6.2.js' %}"></script>#}
    <style>
        .input-group {
            width:100%;
        }
        .input-group-addon {
            width:120px;
        }
        .selectpicker {
            width:100%;
            height:34px;
        }
    </style>
</head>
<body>

<div class="panel-body">

    <!-- Search panel -->
    <div class="panel panel-default">
        <div class="panel-heading">
            Add vacation records
            <!--
            <a href="javascript:void(0)">
                <span class="glyphicon glyphicon-chevron-down pull-right panel-toggle"></span>
            </a>-->
        </div>
        {#<form action="/online/savevacation/" id="mainForm" method="post">#}
        {% csrf_token %}
        <div class="panel-body">
            <div class="row">
                <div class="col-md-6 margin-top-8">
                    <div class="input-group">
                        <span class="input-group-addon" id="">person</span>
                        <select class="selectpicker" name="vac_person" id="vac_person" data-style="btn-info">
                            <option value="Mime Li">Mime Li</option>
                            <option value="David Tang">David Tang</option>
                            <option value="Daisy Zhu">Daisy Zhu</option>
                            <option value="Kyle Bie">Kyle Bie</option>
                            <option value="Cherry Wu">Cherry Wu</option>
                            <option value="Alison Zhang">Alison Zhang</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-6 margin-top-8">
                    <div class="input-group">
                        <span class="input-group-addon" id="">confirm person</span>
                        <select class="selectpicker" data-style="btn-info">
                            <option value="Mime Li">Mime Li</option>
                            <option value="David Tang">David Tang</option>
                            <option value="Daisy Zhu">Daisy Zhu</option>
                            <option value="Kyle Bie">Kyle Bie</option>
                            <option value="Cherry Wu">Cherry Wu</option>
                            <option value="Alison Zhang">Alison Zhang</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 margin-top-8">
                    <div class="input-group">
                        <span class="input-group-addon" id="">days</span>
                        <select class="selectpicker" id="vac_interval" name="vac_interval" data-style="btn-info">
                            <option value="0.5">0.5</option>
                            <option value="1" selected="selected">1</option>
                            <option value="1.5">1.5</option>
                            <option value="2">2</option>
                            <option value="2.5">2.5</option>
                            <option value="3">3</option>
                            <option value="3.5">3.5</option>
                            <option value="4">4</option>
                            <option value="4.5">4.5</option>
                            <option value="5">5</option>
                            <option value="5.5">5.5</option>
                            <option value="6">6</option>
                            <option value="6.5">6.5</option>
                            <option value="7">7</option>
                            <option value="7.5">7.5</option>
                            <option value="8">8</option>
                            <option value="8.5">8.5</option>
                            <option value="9">9</option>
                            <option value="9.5">9.5</option>
                            <option value="10">10</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-6 margin-top-8">
                    <div class="input-group">
                        <span class="input-group-addon" id="">begin date</span>
                        <input type="text" id="vac_date" name="vac_date"  class="form-control" placeholder="" aria-describedby="basic-addon1">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 margin-top-8">
                    <div class="input-group">
                        <span class="input-group-addon" id="">end date</span>
                        <input type="text" id="vac_enddate" class="form-control" name="vac_enddate" placeholder="" readonly="readonly" aria-describedby="basic-addon1">
                    </div>
                </div>
                <div class="col-md-6 margin-top-8">
                    <div class="input-group">
                        <span class="input-group-addon" id="">office</span>
                        <select class="selectpicker" name="vac_office" id="vac_office" data-style="btn-info">
                            <option value="Xi'an">Xi'an</option>
                            <option value="ShangHai">ShangHai</option>
                            <option value="NanNing">NanNing</option>
                            <option value="Belmont">Belmont</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 margin-top-8">
                    <div class="input-group">
                        <span class="input-group-addon" id="">reason</span>
                        <textarea  class="form-control" style="resize:none;" name="vac_reason" id="vac_reason" placeholder="Please enter" aria-describedby="basic-addon1"></textarea>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top:10px;">
                <div class="col-md-2 col-md-offset-10 margin-top-8">
                    <button class="btn btn-primary pull-right" id="submitbtn">Submit</button>
                </div>
            </div>
        </div>
         {#</form>#}
    </div>

</div>

    <script>
        Date.prototype.addDays = function (day,number) {
            var adjustDate = new Date(day + 24 * 60 * 60 * 1000 * 30 * number)
            //alert("Date" + adjustDate.getFullYear() + "-" + adjustDate.getMonth() + "-" + adjustDate.getDate());
            return adjustDate;
        }
        Date.prototype.Format = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1, //??  
                "d+": this.getDate(), //?  
                "h+": this.getHours(), //??  
                "m+": this.getMinutes(), //?  
                "s+": this.getSeconds(), //?  
                "q+": Math.floor((this.getMonth() + 3) / 3), //??  
                "S": this.getMilliseconds() //??  
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }  

        Date.prototype.addDays2 = function (d) {
            this.setDate(this.getDate() + d);
            return this.Format('yyyy-MM-dd');
        };  
        laydate.render({
            elem: '#vac_date',
            lang: 'en',
            done: function (value, date, endDate) {
                if (value && value.length > 0) {
                    $('#vac_date').attr('style','border:1px solid #ccc;');
                    var curDate = new Date(value);
                    $('#vac_enddate').val(curDate.addDays2(parseFloat($('#vac_interval').val())));
                } else {
                    $('#vac_enddate').val('');
                }
                //console.log(value);
                //console.log(date);
                //console.log(endDate);
            }
        });


        //$("#submitbtn").on("click", function () {
        //    $('#mainForm').ajaxSubmit(
        //        {
        //            url: '/online/savevacation/',
        //            type: 'post',
        //            //dataType: 'json',
        //            beforeSubmit: function () { },
        //            success: function (data) {
        //                if (data.success == "1") {
        //                    alert('sucess');
        //                } else {
        //                    alert('erro');
        //                }
        //            },
        //            clearForm: false,
        //            resetForm: false 
        //        });
        //});
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
$("#submitbtn").click(function () {
    var vac_dateobj = $('#vac_date');
        if (vac_dateobj && vac_dateobj.val().length > 0) {
            $.ajax({
            url: '/online/savevacation/',
            type: 'POST',
            dataType: 'json',
            headers: { "X-CSRFToken":getCookie('csrftoken')},
            data: {
                vac_date: $('#vac_date').val(),
                vac_person: $('#vac_person').val(),
                vac_interval: $('#vac_interval').val(),
                vac_reason: $('#vac_reason').val(),
                vac_enddate: $('#vac_enddate').val(),
                vac_office: $('#vac_office').val()
                },
            success: function (data) {
                if (data && data.success == '1') {
                    vac_dateobj.val('');
                    $('#vac_reason').val('');
                    alert('success');
                } else {
                    alert('error');
                }
            }
            })

        } else {
            vac_dateobj.attr('style','border:1px solid red;');
        }
    })
    </script>
   <!--
    <form action="/online/savevacation/" method="post">
    {% csrf_token %}
    {%if error%}
    <div style="color:red;">{{error}}</div>
    <br />
    {%endif%}
    vac_date:<input type="text" name="vac_date" value="{{vac_date}}" />
    <br />
    vac_person:<input type="text" name="vac_person" value="{{vac_person}}" />
    <br />
    vac_interval:<input type="text" name="vac_interval" value="{{vac_interval}}" />
    <br />
    vac_reason:<textarea  name="vac_reason">{{vac_reason}}</textarea>
    <br />
    <input type="submit" value="submit" />
</form>-->

</body>
</html>

